<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>历史成绩</title>
		<base href="../../../" />
		<script src="lib/function/responsive.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="static/css/api.css" />
		<link rel="stylesheet" type="text/css" href="static/css/aui-pull-refresh.css"/>
		<style>
			body{padding-top:1.3rem;height:100%;box-sizing: border-box;}
			#header{
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				background-color: #fff;
				z-index: 99;
				box-shadow: 0 0 10px 3px
				rgba(205, 205, 205, 0.45);
				/* box-shadow: 0rem 0rem 0.17rem 0.04rem
				rgba(205, 205, 205, 0.45); */
			}
			#header .header-box{
				display: flex;
				justify-content: space-between;
				height: 1.06rem;
			}
			#header .return{
				width: 1.4rem;
				height: 1.06rem;
				line-height: 1.06rem;
				box-sizing: border-box;
				padding-left: 0.65rem;
				font-size: 0.22rem;
				color: #333333;
				background: url(static/icon/back.png) no-repeat left 0.3rem center;
				background-size: 0.18rem;
			}
			#header .return:active,#header .home:active{
				opacity: 0.6;
			}
			#header .name{
				line-height: 1.06rem;
				font-size: 0.28rem;
				font-weight: bold;
				color: #333333;
			}
			#header .home{
				width: 1.4rem;
				height: 1.06rem;
				background: url(static/icon/home.png) no-repeat right 0.3rem center;
				background-size: 0.44rem;
			}
			
			.history{}
			.history-top {
				width: 19.2rem;
				min-height: 3.08rem;
				background-color: #f6f6f6;
				padding: 0.1rem 0 0;
			}
			.history-top form{}
			.history-top .form-lis{
				padding: 0.1rem 0.3rem;
				overflow: hidden;
			}
			.history-top .date-box{
				float: left;
				margin-right: 0.4rem;
			}
			.history-top .date-box span{}
			.history-top .date-box input{
				width: 2.41rem;
				height: 0.71rem;
				background: url(static/icon/ri.png) no-repeat right 0.18rem center;
				background-size:0.35rem;
				background-color: #ffffff;
				border: solid 0.01rem #e5e5e5;
				font-family: MicrosoftYaHei;
				font-size: 0.22rem;
				color: #b7b7b7;
				padding: 0 0 0 0.2rem;
			}
			.history-top .status-box i,.history-top .object-box i,.history-top .type-box i{
				display: inline-block;
				min-width: 1.39rem;
				height: 0.7rem;
				background-color: #ffffff;
				border: solid 0.01rem #e5e5e5;
				text-align: center;
				line-height: 0.7rem;
				vertical-align: middle;
				font-family: MicrosoftYaHei;
				font-size: 0.22rem;
				color: #b7b7b7;
				margin-right: 0.05rem;
				padding: 0 0.2rem;
			}
			.history-top .status-box,.history-top .type-box {
				float: left;
			}
			.history-top .type-box{
				margin-left: 0.4rem;
			}
			.history-top .status-box .active,.history-top .object-box .active,.history-top .type-box .active{
				color: #2691ff;
				border: solid 0.01rem #2691ff;
			}
			.search{
				padding-left: 1.41rem;
				overflow: hidden;
			}
			.search .btn{
				width: 1.6rem;
				height: 0.7rem;
				float: left;
				margin-right: 0.4rem;
				background-color: #2691ff;
				box-shadow: 0.02rem 0.02rem 0.11rem 0.03rem 
					rgba(57, 141, 227, 0.52);
				border-radius: 0.1rem;
				margin-top: 0.2rem;
				text-align: center;
				line-height: 0.7rem;
				font-size: 0.18rem;
				color: #ffffff;
				
			}
			.search  #reseat{
				background-color: #fff;
				box-shadow:none;
				color: #2691ff;
				border: 1px solid #2691ff;
			}
			.search .btn:active{
				opacity: 0.6;
			}
			.history-con{
				padding: 0.3rem 0.3rem 2rem;
			}
			.history-con .tit{
				font-weight: bold;
			}
			.history-con-table{
				min-height: 7.26rem;
				border: solid 0.01rem #eaeaea;
			}
			.history-con ul{
				overflow: hidden;
			}
			.history-con li{
				float: left;
				width: 11.11%;
				text-align: center;
				height: 1.06rem;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 0.22rem;
					color: #a6a6a6;
			}
			.history-con-box{
				/* height: 6rem; */
				/* overflow-y: auto; */
			}
			.history-con-box li{
				color: #333333;
			}
			.history-con-box .history-con-lis:nth-child(2n-1){
				background-color: rgba(38,145,255,0.08);
			}
			.history-con-box .history-con-lis li{}
		</style>
	</head>
	<body>
		<div id="header">
			<div class="header-box">
				<div i18n="return" class="return" id="close">返回</div>
				<div class="name" i18n="historical.results">历史成绩</div>
				<div class="home"  id="close"></div>
			</div>
		</div>
		<div class="aui-refresh-content">
		<div class="history">
			<div class="history-top">
				<form action="">
					<div class="form-lis">
						<div class="date-box">
							<span i18n="select.time">选择时间:&nbsp;</span>
							<input i18n="start.time" i18n-only="placeholder" type="text" readonly id="start_date" placeholder="开始时间" value="" />
							<span i18n="to">&nbsp;&nbsp;至&nbsp;&nbsp;</span>
							<input i18n="end.time" i18n-only="placeholder" type="text" readonly id="end_date" placeholder="结束时间" value="" />
						</div>
						<div class="status-box">
							<span i18n="select.state">选择状态:&nbsp;</span>
							<i class="select" i18n="success" data-type = "1">通过</i>
							<i class="select" i18n="failed" data-type = "2">未通过</i>
						</div>
						<div class="type-box">
							<span i18n="select.category">选择分类:&nbsp;</span>
							<i class="select" i18n="exam" data-type = "1">考试</i>
							<i class="select" i18n="train" data-type = "2">练习</i>
						</div>
					</div>
					<div class="form-lis">
						<div class="object-box" id="object-box">
							<span i18n="select.account">选择科目:&nbsp;</span>
							<!-- <i class="select active">镜下识别</i>
							<i class="select">镜下识别2</i> -->
						</div>
					</div>
					<div class="search">
						<div i18n="reset" class="btn" id="reseat">重置</div>
						<div i18n="search" class="btn" id="searchBtn">搜索</div>
					</div>
				</form>
			</div>
			<div class="history-con">
				<div class="history-con-table">
					<div class="tit">
						<ul>
							<li i18n="account.name">科目名称</li>
							<li i18n="operate">操作</li>
							<li i18n="operation.score">操作分</li>
							<li i18n="time.score">时间分</li>
							<li i18n="total.score">总分</li>
							<li i18n="category">类别</li>
							<li i18n="state">状态</li>
							<li i18n="examination.time">考试时间</li>
							<li i18n="touch.error">触碰错误</li>
						</ul>
					</div>
					<div class="history-con-box" id="list-box">
						<!-- <div class="history-con-lis">
							<ul>
								<li>镜下识别</li>
								<li>20</li>
								<li>30</li>
								<li>100</li>
								<li>测试</li>
								<li>通过</li>
								<li>2021-02-27</li>
							</ul>
						</div> -->
					</div>
				</div>
			</div>
		</div>
		<div class="mescroll-upwarp hidden">
		  <p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip" i18n="loading">加载中..</p>
		</div>
		<div class="no-data hidden"   i18n="loading.completed">-- 加载完毕 --</div>
		</div>
		<script type="text/javascript" src="runtime/pub.js"></script>
		<script src="dist/i18n.js"></script>
		<script type="text/javascript" src="runtime/index/history.js"></script>
		<script type="text/javascript" src="lib/other/datePicker.js"></script>
	</body>
</html>
